CSS Outline

The CSS outline property is pretty much similar to the border property. But the outline is drawn outside the element border. Here are some major differences which distinguish the outline property from border property. CSS Outline

  • The outline does not occupy space from the box model, but the border does.
  • The border is always in rectangular or square form but not outline.
  • Unlike border, we do not have different outline styling for all side. The outline has to be same for all sides of an element.

Note: Internet Explorer6 and Netscape7 do not support outline property. In CSS we can use 4 properties to style or show the outline of an element.

  • outline-width: It set the width of the outline.
  • outline-style: It defines the different styling for the outline.
  • outline-color: It specifies the outline colour.
  • outline: It can specify all the above three properties in a single statement.

CSS outline-width Property

The outline-width property specifies the width for an element outline. And it accepts four values.

  • thin (means 1px)
  • medium (means 3px)
  • thick (means 5px)
  • Or we can simply use the length units in px, pt, cm, em etc.

Example 

<p style="outline-width: thin; outline-style: solid; border: 3px solid red"> Paragraph with thin outline width and red border</p>

<p style="outline-width: medium; outline-style: solid; border: 3px solid red"> Paragraph with medium outline width and red border</p>

<p style="outline-width: thick; outline-style: solid; border: 3px solid red"> Paragraph with thick outline width and red border</p>

<p style="outline-width: 7px; outline-style: solid; border: 3px solid red"> Paragraph with black 7px outline width and red border</p>

Preview: 

Paragraph with thin outline width and red border

Paragraph with medium outline width and red border

Paragraph with thick outline width and red border

Paragraph with black 7px outline width and red border

Note: In the above preview you can see that the black outline is drawn outside the red border.

CSS outline-style property

The outline-style property is similar to the border-style property. It can specify the different type of styling to the outline structure. Here are the following values accepted by the outline-style:

  • dotted: Set the dotted outline
  • dashed: Set the dashed outline.
  • solid: Set a single line solid outline
  • double: Set two parallel lines outline.
  • groove: Set a 3d groove outline
  • ridge: Set a 3d ridged outline.
  • inset: Set a 3D inset outline.
  • outset: Set a 3D outset outline
  • none: Set no outline
  • hidden: Set a hidden outline

Example 

<p style="outline-width: medium; outline-style: dotted; "> Paragraph with dotted Outline</p>
<p style="outline-width: medium; outline-style: dashed; "> Paragraph with dashed outline</p>
<p style="outline-width: medium; outline-style: solid; "> Paragraph with solid outline</p>
<p style="outline-width: medium; outline-style: double; "> Paragraph with double outline</p>
<p style="outline-width: medium; outline-style: groove; "> Paragraph with groove outline </p>
<p style="outline-width: medium; outline-style: ridge; "> Paragraph with ridge outline.</p>
<p style="outline-width: medium; outline-style: inset; "> Paragraph with inset outline.</p>
<p style="outline-width: medium; outline-style: outset; "> Paragraph with outset outline</p>
<p style="outline-width: medium; outline-style: none; "> Paragraph with none outline</p>
<p style="outline-width: medium; outline-style: hidden; "> Paragraph with hidden outline</p>

Preview 

Paragraph with dotted Outline

Paragraph with dashed outline

Paragraph with solid outline

Paragraph with double outline

Paragraph with groove outline

Paragraph with ridge outline.

Paragraph with inset outline.

Paragraph with outset outline

Paragraph with none outline

Paragraph with hidden outline

CSS Outline-Color Property

Like other colour properties, it defines the colour for the element outline. It can accept value by color name, hex code, RGB code, etc.

Example 

<p style="outline-width: medium; outline-style: solid; outline-color: blue "> Paragraph with solid Outline and blue colour</p>

<p style="outline-width: medium; outline-style: dashed; outline-color: green "> Paragraph with dashed outline and green color</p>

Preview 

Paragraph with solid Outline and blue colour

Paragraph with dashed outline and green color

CSS outline Property

By far we have discussed different properties line outline-width, outline-color and outline-style to set the outline width, colour and style. But using the single outline property we can set all these three properties in a single statement.

Syntax 

{ outline: width style color;}

Example 

<p style="outline: 3px dotted blue; "> Paragraph with 3px widht dotted and blue colour outline</p>
<p style="outline: medium dashed green "> Paragraph with medium widht dashed and green color outline</p>

Preview 

Paragraph with 3px widht dotted and blue colour outline

Paragraph with medium widht dashed and green color outline

CSS outline-offset Property

outline-offset is an outline property which is used to define the spacing between the element border and outline. And it accepts length values in px, cm, em etc.

Example 

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p style="outline: 3px dotted blue; outline-offset: 15px; border: 2px solid black;"> 
  Paragraph with 3px widht dotted and blue colour outline having 15px offset
</p>
</body>
</html>

Preview 

Paragraph with 3px widht dotted and blue colour outline having 15px offset

Summary

  • The outline property in CSS is similar to the border.
  • There are some differences which distinct outline from the border.
  • It is not necessary that outline be always rectangular.
  • For an element, the outline shape and size are similar to all sides.
  • Like border-style, we have similar values for outline style.
Previous Tutorial Next Tutorial